<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <base href="http://localhost/shop-resources/back/">

    <link href="css/H-ui.min.css" rel="stylesheet" type="text/css"/>
    <link href="css/H-ui.admin.css" rel="stylesheet" type="text/css"/>
    <link href="lib/icheck/icheck.css" rel="stylesheet" type="text/css"/>
    <link href="lib/Hui-iconfont/1.0.1/iconfont.css" rel="stylesheet" type="text/css"/>

    <!-- 引入Webupload的样式文件-->
    <link rel="stylesheet" type="text/css" href="lib/webuploader/0.1.5/webuploader.css">


</head>
<body>
<div class="pd-20">
    <form action="abc" method="post" class="form form-horizontal" id="form-admin-add">
        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>商品名称：</label>
            <div class="formControls col-5">
                <input type="text" class="input-text" value="华为手机" autocomplete="off" placeholder="" id="gname"
                       name="gname" datatype="*" nullmsg="用户名不能为空">
            </div>
            <div class="col-4"></div>
        </div>

        <div class="row cl">
            <label class="form-label col-3">商品类型：</label>
            <div class="formControls col-5"> <span class="select-box" style="width:150px;">
				<select class="select" name="gtype" size="1">
					<option value="0">手机</option>
					<option value="1">冰箱</option>
					<option value="2">电视</option>
					<option value="3">电脑</option>
					<option value="4">口红</option>
				</select>
				</span></div>
        </div>

        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>商品价格：</label>
            <div class="formControls col-5">
                <input type="text" value="1999.9" class="input-text" placeholder="@" name="gprice" id="gprice"
                       datatype="*" nullmsg="请输入邮箱！">
            </div>
            <div class="col-4"></div>
        </div>


        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>商品库存：</label>
            <div class="formControls col-5">
                <input type="text" value="25" class="input-text" placeholder="@" name="gstock" id="gstock" datatype="n"
                       nullmsg="请输入邮箱！">
            </div>
            <div class="col-4"></div>
        </div>

        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>商品图片：</label>
            <input type="hidden" name="gpng" id="gpng">
            <!-- webupload操作的区域-->
            <div id="uploader-demo">

                <!-- 这个div就是用来显示上传图片的缩率图-->
                <div id="fileList" class="uploader-list">

                </div>

                <!-- 上传图片的按钮-->
                <div id="filePicker">选择图片</div>
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-3">商品描述：</label>
            <div class="formControls col-5">
                <textarea name="gdesc" cols="" rows="" class="textarea" placeholder="说点什么...100个字符以内" dragonfly="true"
                          onKeyUp="textarealength(this,100)">
                    华为手机，大屏，库充，5G
                </textarea>
                <p class="textarea-numberbar"><em class="textarea-length">0</em>/100</p>
            </div>
            <div class="col-4"></div>
        </div>

        <div class="row cl">
            <div class="col-9 col-offset-3">
                <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
            </div>
        </div>
    </form>
</div>
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/icheck/jquery.icheck.min.js"></script>
<script type="text/javascript" src="lib/Validform/5.3.2/Validform.min.js"></script>
<script type="text/javascript" src="lib/layer/1.9.3/layer.js"></script>
<script type="text/javascript" src="js/H-ui.js"></script>
<script type="text/javascript" src="js/H-ui.admin.js"></script>
<script type="text/javascript" src="js/ShopUtils.js"></script>

<!--引入webupload的js文件 -->
<script type="text/javascript" src="lib/webuploader/0.1.5/webuploader.js"></script>
<script type="text/javascript">
    $(function () {

        $('.skin-minimal input').iCheck({
            checkboxClass: 'icheckbox-blue',
            radioClass: 'iradio-blue',
            increaseArea: '20%'
        });

        // 初始化后表单验证才能看到效果
        $("#form-admin-add").Validform({
            tiptype: 2,
            callback: function (form) {
                submit(form, "shop-back/goodsController/addGoods"); // 提交表单
                return false;
            }
        });

        // 初始化webupload组件
        var uploader = WebUploader.create({
            auto: true, // 是否开启自动上传
            server: shopUrl.baseUrl+'shop-resources/file/uploadFile', // 图片上传的地址
            pick: '#filePicker', // 上传的按钮
            accept: { // 顾虑的作用
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }
        });

        // 当有文件添加进来的时候
        uploader.on('fileQueued', function (file) {

            // 创建一个div里面包含文件的id，文件的名字，包括<img>
            var $li = $(
                '<div id="' + file.id + '" class="file-item thumbnail">' +
                '<img>' +
                '<div class="info">' + file.name + '</div>' +
                '</div>'
            );
            // 从上面的Jquery对象中中找到img标签
            var $img = $li.find('img');

            // 把创建的预览图的div元素放入到上面div里面
            $("#fileList").append($li);

            // 创建缩略图
            uploader.makeThumb(file, function (error, src) {
                if (error) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }

                $img.attr('src', src);
            }, 100, 100);
        });

        // 文件上传成功，给item添加成功class, 用样式标记上传成功。
        uploader.on('uploadSuccess', function (file, responce) {
            // 1.获取服务端返回的地址
            var url = responce.data;

            // 2.把url写入到表单中
            var formUrl = $("#gpng").val();

            if (formUrl) {
                url = formUrl + "|" + url;
            }
            $("#gpng").val(url);
        });


    });
</script>
</body>
</html>